<template>
  <div class="view-wrapper">
      <div class="listBox">
        <div style="margin-bottom: 14px" class="topBtn">
          <div>
            <el-button type="primary" @click="handleAdd">新增权益卡标签</el-button>
          </div>
        </div>
        <el-table v-loading="loading" :data="customerList" stripe border>
          <el-table-column label="序号" type="index" width="55" align="center" fixed />
          <el-table-column label="标签图标" align="center" prop="img" :show-overflow-tooltip="true" >
            <template slot-scope="scope">
              <div class="imgBox">
                <img :src="scope.row.img" alt="" v-if="scope.row.oneIcon != '-'">
                <span v-else>--</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column label="权益卡标签名称" align="center" prop="name" :show-overflow-tooltip="true" />
          <el-table-column label="修改时间" align="center" prop="updateTime" :show-overflow-tooltip="true" />
          <el-table-column label="操作" align="center" width="120" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button size="mini" type="text" @click="handleEdit(scope.row)" >
                编辑  </el-button>
              <!-- <el-button size="mini" type="text" @click="handleDelete(scope.row)">
                 删除</el-button> -->
            </template>
          </el-table-column>
        </el-table>

        <pagination v-show="total>0" :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"
          @pagination="getList" />

    </div>
    <add-game
      ref="childRef"
      v-if="addGame"
      :id="id"
      :pathType="pathType"
      :visible.sync="addGame"
      @success="_handleSuccess" 
    />
  </div>
  
</template>

<script>
  import {
    tagList,
  } from "@/api/equityManager/labelList";
  import addGame from './components/addGame' 
  import ExportExcelButton from "@/components/ExportExcelButton/index";
  import { getToken } from "@/utils/auth";
  export default {
    name: "Customer",
    components: {
      ExportExcelButton,
      addGame,
    },
    data() {
      return {
        id: '',
        addGame: false,
        pathType: 'add',
        scoreStatus: '',
        addScore: false, 
        addBet: false,
        // 遮罩层
        loading: false,
        // 显示搜索条件
        showSearch: true,
        // 总条数
        total: 0,
        // 会员列表表格数据
        customerList: [],
        // 查询参数
        queryParams: {
          pageNum: 1,
          pageSize: 10,
        },
        //导入需要的参数
        fileData: {
            guessActivityId: '',
        },
        fileList: [],
        fileaction: process.env.VUE_APP_BASE_API + "/guess/activity/support/import",
        headers: {
          "X-Access-Token": getToken(),
        }, //设置上传文件请求头
      };
    },
    computed: {
      ExportParams() {
        const params = {
          ...this.queryParams,
        };
        return params;
      },
    },
    created() {
      this.queryParams.guessActivityId = this.$route.query.guessActivityId
      this.getList();
    },
    methods: {
      /** 数字权益标签 列表 */
      getList() {
        this.loading = true;
        var data = {
          ...this.queryParams
        }
        tagList(this.queryParams).then(response => {
          this.total = response.result.total
          this.customerList = response.result.records
          this.customerList = this.customerList.map(item => {
            // console.log('item',item)
            Object.keys(item).forEach(key => {
              if (item[key] === '') {
                item[key] = '-'
              }
            })
            return item
          })
          this.loading = false;
        });
      },
      /** 搜索按钮操作 */
      handleQuery() {
        this.queryParams.pageNum = 1;
        this.getList();
      },
      /** 重置按钮操作 */
      resetQuery() {
        // this.resetForm();
        this.$refs["queryForm"].resetFields();
        console.log('this.queryParams', this.queryParams)
        this.handleQuery();
      },
      
      //新增标签
      handleAdd(){
        this.addGame = true
        this.pathType = 'add'
      },
      //编辑标签
      handleEdit(row){
        this.addGame = true
        this.pathType = 'edit'
        this.id = row.id
      },
      //删除
      handleDelete(row){
        this.$confirm(`是否删除，请谨慎操作`, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          deleteSupport(row.id).then(res => {
            this.$message.success('操作成功');
            this.getList();
          })
        }).catch(() => {});
      },
      
      _handleSuccess(data) {
        console.log("data", data);
        this.queryParams.pageNum = 1
        this.getList();
      },
      
    }
  };

</script>
<style lang="scss" scoped>
  .head {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    padding: 20px 20px 0;
  }
  .listBox {
    box-shadow: 0px 4px 12px 0px rgb(1 41 99 / 6%);
    background-color: #fff;
    border-radius: 8px;
    //   height: 120px;
    padding: 20px 20px;
    margin-top: 10px;
  }
  .topBtn{
    display: flex;
    justify-content: flex-start;
  }
  .imgBox{
    img{
      width: 60px;
      height: 60px;
    }
  }
</style>
